/*
 * 卡片组件组件
 * @Author: ljb
 * @Date: 2018-04-07 13:17:02
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-06-01 16:44:50
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    @import '~src/assets/css/common.less';

    .card {
        background-color: #fff;
        margin-bottom: 20*@rem-per-px;
        .card__header {
            display: flex;
            width: 100%;
            height: @cell-height;
            font-size: @sub-font;
            border-bottom: @section-border;
            .title {
                display: flex;
                width: 50%;
                .title-icon {
                    position: relative;
                    width: 86*@rem-per-px;
                    height: @cell-height;
                    font-size: 0;
                    & > img {
                        width: 48*@rem-per-px;
                        height: 48*@rem-per-px;
                        border-radius: 50%;
                    }
                }
                .title-text {
                    width: 100%;
                    height: 100%;
                    line-height: @cell-height;
                }
            }
            .time {
                width: 50%;
                height: 100%;
                line-height: @cell-height;
                padding-right: 24*@rem-per-px;
                font-size: 22*@rem-per-px;
                color: @info-color;
                text-align: right;
            }
        }
        .card__body {
            display: table;
            width: 100%;
            min-height: 200*@rem-per-px;
            & > div {
                display: table-cell;
                vertical-align: middle;
                &.desc__icon {
                    position: relative;
                    width: 146*@rem-per-px;
                    & > img {
                        width: 100*@rem-per-px;
                        height: 100*@rem-per-px;
                    }
                }
                &.result-content {
                    padding: 20*@rem-per-px 0;
                    line-height: 1.75;
                    font-size: @content-font;
                }
                &.arrow {
                    width: 10%;
                    text-align: center;
                    & > img {
                        width: 70%;
                    }
                }
            }
        }
    }

</style>
<template>
	<div class="card">
		<div class="card__header">
			<div class="title">
				<div class="title-icon">
					<img
						:src="titleIcon"
						class="level-vertical-middle"
						alt="">
				</div>
				<div class="title-text">{{ text || '测试标题' }}</div>
			</div>
			<div class="time">{{ time || '2018-04-07 13:24:58' }}</div>
		</div>
		<div class="card__body">
			<div class="desc__icon">
				<img
					:src="contentIcon"
					class="level-vertical-middle"
					alt="">
			</div>
			<div class="result-content">{{ content || '测试内容' }}</div>
			<div class="arrow">
				<img
					:src="right_arrow"
					alt="">
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Card',
	props: ['titleIcon', 'text', 'time', 'content', 'contentIcon'],
	data() {
		return {
			right_arrow: require('src/assets/media/img/icons/right-arrow.png'),

		};
	},
	methods: {

	},
};
</script>
